<template>
  <div class="container">
    <p class="title">账户登录</p>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="100px"
      class="demo-loginForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="loginForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item label="验证码" prop="captcha">
        <el-input v-model.number="loginForm.captcha" type="text"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')">
          提交
        </el-button>
      </el-form-item>
    </el-form>
    <p class="base">切换短信登录</p>
  </div>
</template>

<script>
export default {
  props: ["loginForm"],
};
</script>

<style lang="less" scoped>
.container {
  right: 100px;
  top: 150px;
  color: white;
  width: 380px;
  height: 420px;
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
}
.title {
  text-align: center;
  font-size: 32px;
}
.el-input {
  .el-input__inner {
    width: 240px;
  }
}
.el-form-item__label {
  color: white;
}
.el-button--primary {
  width: 240px;
  background: rgba(245, 178, 215, 0.6);
  border: 0;
}
.base {
  text-decoration: underline;
  font-size: 20px;
  text-align: center;
}
img {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
</style>
